<template>
  <div class="RoleRelationship">
    <div class="pubBig Privilege">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <div class="btnLine" style="background: #eff8ff">
        <button class="btn btn-default" @click="Fanselectful()" v-if="false">
          反选
        </button>
        <button
          class="btn btn-default"
          @click="saveRolePermission"
          v-loading.fullscreen.lock="fullscreenLoading"
        >
          保存
        </button>
      </div>
      <div class="LeftMain">
        <div class="Tb">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>编号</th>
                <th>角色名称</th>
              </tr>
            </thead>
            <tbody class="isTbody" v-loading="isLoading">
              <tr
                v-for="(item, index) in model_query"
                :key="index"
                @click="openDetails(item, index)"
                :class="{ selGreen: changeSelectStyle == index }"
              >
                <td>{{ limit * (page - 1) + index + 1 }}</td>
                <td>{{ item.name }}</td>
              </tr>
            </tbody>
          </table>
          <!-- 分页开始 -->
          <div class="block">
            <el-pagination
              small
              layout="prev, pager, next"
              :total="this.total"
              :page-size="this.limit"
              @current-change="switchList"
            >
            </el-pagination>
          </div>
          <!-- 分页结束 -->
        </div>
      </div>
      <div class="RightMain">
        <p class="p1">角色权限列表</p>
        <div class="Tb">
          <div>
            <el-tree
              v-loading="isLoading_b"
              :data="datalist"
              :show-checkbox="true"
              node-key="id"
              ref="tree"
              @check="handleCheck"
              :render-after-expand="true"
              :props="defaultProps"
              :highlight-current="true"
              style="padding:10px"
            >
            </el-tree>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      model_query: [],
      changeSelectStyle: -1,
      data: [],
      isLoading: false,
      id: 1000,
      defaultProps: {
        children: "children",
        label: "label",
      },
      listdata: [],
      Idlist: [],
      inindex: "",
      multipleTable: [],
      /*************************************************************************/
      datalist: [],
      data: [],
      defaultProps: {
        children: "children",
        label: "title",
      },
      RoleObj: null,
      PermissionsMenuList: [],
      Permissions: [],
      RolePermissionList: [],
      page: 1,
      limit: 27,
      total: 0,
      newTreeList: [],
      check: true,
      isLoading_b: false,
      fullscreenLoading: false,
    };
  },
  methods: {
    //角色列表查询
    queryz() {
      this.model_query = [];
      var params = {};
      this.isLoading = true;
      //GET /api/Role/GetList
      this.$get("roles?page=" + this.page + "&limit=" + this.limit, params)
        .then((res) => {
          console.log("角色列表查询结果");
          console.log(res);
          if (res.code == 0) {
            this.model_query = [];
            this.model_query = res.data.list;
            this.total = res.data.TotalCount;
            console.log("角色列表");
            console.log(this.model_query);
            this.isLoading = false;
            console.log(this.model_query[0].id);
            this.openDetails(this.model_query[0].id, 0);
            this.queryRolePermission(this.model_query[0].id);
          } else if (res.code == -1) {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        })
        .catch((err) => {
          console.log(err);
          this.isLoading = false;
        });
    },
    // 换页
    switchList(val) {
      this.page = val;
      this.queryz();
    },
    //查询菜单列表
    queryG() {
      var params = {};
      //GET /api/Permission/GetList
      this.$get("permissions", params)
        .then((res) => {
          console.log("菜单列表查询结果");
          console.log(res);
          if (res.code == 0) {
            // this.check = true
            this.datalist = [];
            this.datalist = res.data;
            console.log("菜单列表");
            console.log(this.datalist);
          } else if (res.code == -1) {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    async handleCheck(checkedNodes, checkedKeys) {
      console.log("选中菜单");
      console.log(checkedKeys.checkedNodes);
      // this.check = false
      this.PermissionsMenuList = checkedKeys.checkedNodes;
    },
    openDetails(row, index) {
      console.log("选中角色");
      // this.check = true
      console.log(row);
      console.log(index);
      console.log(row.id);
      this.changeSelectStyle = index;
      this.RoleObj = row;
      this.queryRolePermission(row.id);
      console.log(this.RoleObj);
      // this.$get("roles/" + row.id + "/permissions").then(res => {
      //   if (res.code == 0) {
      //     console.log('当前权限');
      //     console.log(res);
      //     this.newTreeList = []
      //     // this.newTreeList = res.data.
      //   }
      // })
    },
    setCheckedNodes() {
      this.$refs.tree.setCheckedNodes([
        {
          id: 5,
          label: "二级 2-1",
        },
        {
          id: 9,
          label: "三级 1-1-1",
        },
      ]);
    },
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([3]);
    },
    //保存对照
    saveRolePermission() {
      this.fullscreenLoading = true;
      if (this.RoleObj == null) {
        this.$message({ message: "选择角色后保存", type: "success" });
        this.fullscreenLoading = false;
        return;
      }
      this.PermissionsMenuList.filter((m) => {
        let roleid = this.RoleObj.id;
        let permissionid = m.id;
        this.Permissions.push({ roleid, permissionid });
        // this.Permissions.push(m);
      });
      console.log(666);
      console.log(this.Permissions);
      // this.Permissions.forEach(i => {
      //   this.Permissions.push(this.RoleObj.id)
      // })
      var params = {
        roleid: this.RoleObj.id,
        // list: this.Permissions
        list: this.Permissions,
      };
      console.log("批量新增");
      console.log(params);
      //POST /api/Role/MatchPermission
      this.$post("role_permissions/AddList", params)
        .then((res) => {
          console.log("对照完成");
          console.log(res);
          if (res.code == 0) {
            this.$refs.tree.setCheckedKeys([]);
            this.RoleObj = null;
            this.changeSelectStyle = -1;
            this.Permissions = [];
            this.PermissionsMenuList = [];
            this.$message({
              message: "更改权限成功",
              type: "success",
            });
            this.fullscreenLoading = false;
          } else if (res.code == -1) {
            this.$message({
              message: res.msg,
              type: "warning",
            });
          }
        })
        .catch((err) => {
          console.log(err);
          this.fullscreenLoading = false;
        });
    },
    //角色列表查询
    queryRolePermission(RoleID) {
      // alert(111)
      this.RolePermissionList = [];
      // var params = {
      //   RoleId: RoleID
      // };
      if (RoleID) {
        this.$get("role_permissions/GetPermission/" + RoleID)
          .then((res) => {
            // this.check = true
            console.log("角色权限列表查询结果");
            console.log(res);
            if (res.code == 0) {
              // this.check = false
              this.RolePermissionList = res.data;
              console.log("新权限列表");
              console.log(this.RolePermissionList);
              // this.$refs.tree.setCheckedNodes(this.RolePermissionList.children)
              var PermissionIdList = [];
              for (var i = 0; i < this.RolePermissionList.length; i++) {
                PermissionIdList.push(this.RolePermissionList[i].id);
              }
              console.log(999);
              console.log(PermissionIdList);
              // this.$refs.tree.setCheckedKeys(PermissionIdList);
              this.$refs.tree.setCheckedKeys(PermissionIdList, false, false);
            } else {
              this.$refs.tree.setCheckedKeys([]);
            }
          })
          .catch((err) => {
            this.$refs.tree.setCheckedKeys([]);
            console.log(err);
          });
      }
    },
    /*************************************************************************/

    getSElect(rows) {
      for (var i = 0; i < rows.length; i++) {
        if (rows[i].HaveFun == 1) {
          this.multipleTable.push(rows[i]);
          // this.Fanselectful();
        } else {
          return;
        }
      }
    },
    Fanselectful() {
      console.log(this.multipleTable);
      if (this.multipleTable) {
        this.multipleTable.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    Prescessful() {
      console.log(this.Idlist);
      var datalist = {
        model: "11.综合维护-角色与权限",
        code: "11061",
        input: {
          role_id: this.inindex,
          powers: this.Idlist,
        },
      };
      this.$post("CloudHIS/Business_Handle", datalist)
        .then((res) => {
          if (res.code == 0) {
            this.$message({ message: "保存成功", type: "success" });
          } else {
            this.$message({ showClose: true, message: res.msg, type: "error" });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    gettr(item) {
      this.Idlist = [];
      console.log(item);
      item.forEach((v) => {
        this.Idlist.push(v.id);
      });
      this.multipleSelection = item;
    },
  },
  created() {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }
    this.queryz();
    this.queryG();
  },
  beforeMount() {
    // this.openDetails(1, 0)
  },
};
</script>
<style lang="scss">
.RoleRelationship {
  .Privilege .LeftMain {
    position: absolute;
    width: 365px;
    top: 86px;
    left: 0;
    bottom: 10px;
    border-right: 1px solid #ddd;
  }

  .Privilege .LeftMain .Tb {
    overflow-y: auto;
    position: absolute;
    top: 1px;
    left: 10px;
    right: 10px;
    bottom: 0;
    border: 1px solid #ddd;
  }

  .Privilege .LeftMain .Tb table {
    border: none;
  }

  .Privilege .LeftMain .Tb table td:first-child {
    border-left: none;
  }

  .Privilege .LeftMain .Tb table td:last-child {
    border-right: none;
  }

  .Privilege .LeftMain .Tb table tr {
    cursor: pointer;
  }

  .Privilege .LeftMain .Tb table tr td {
    cursor: pointer;
  }

  .Privilege .RightMain {
    padding-left: 365px;
  }

  .Privilege .RightMain input {
    position: relative;
    top: 1px;
    margin-right: 5px;
  }

  .Privilege .RightMain label {
    cursor: pointer;
  }

  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }

  .RightMain .Tb {
    position: absolute;
    top: 116px;
    left: 372px;
    right: 5px;
    bottom: 10px;
    overflow: auto;
    border: 1px solid #ddd;
  }
  .isTbody {
    min-height: 730px;
  }
  .el-pagination {
    text-align: center;
  }
}
</style>
